<template>
	<view class="order">
		<view v-if="hasLogin">
			<!-- tap切换 -->
			<view class="tab fl" style="width: 100%;background-color: #FFFFFF; display: flex;justify-content: space-around;height: 60rpx;line-height: 60rpx;">
				<text v-for="(item,i) in tabs" :key="i" :data-id="i" class="tit" :data-type='item.type' :class="{'cur': tabCur == i}"
				 @tap="tabSelect">{{item.name}}
				</text>
			</view>
			<!-- end -->
			<view class="nologin" v-if="nolist">
				<image src="/static/images/middle_image@2x.png" mode="widthFix"></image>
				<view>暂无订单哦</view>
			</view>
			<!-- 列表数据 -->
			<view class="lists" :style="{ height: show ? '1100rpx' : 'auto', overflow: show ? 'hidden' : 'auto' }">
				<mescroll-body top="100" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<order-list :list="goods"></order-list>
				</mescroll-body>
			</view>
			<!-- end -->
		</view>

		<view class="nologin" v-else >
			<image src="/static/images/middle_image@2x.png" mode="widthFix"></image>
			<view>您还未登录，无法查看订单</view>
			<navigator url="/pages/register/login">去登陆</navigator>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import OrderList from '@/components/OrderList.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	mixins: [MescrollMixin],
	components: {
		MescrollBody,
		OrderList
	},
	computed: mapState(['hasLogin', 'uerInfo']),
	data() {
		return {
			tabCur: 'all',
			show: false,
			
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true,
				textNoMore: '没有更多数据',
				page: {
				  num : 0,
				  size : 10,
				  time : null
				}
			},
			goods: [], //列表数据
			page:0,
			pages:1,
			size:10,
			orderstatusid:'',
			nolist:false,
			
			tabCur: '0',
			tabs: [{
				name: '全部',
				type: 'em'
			}, {
				name: '待接单',
				type: 'package'
			}, {
				name: '已接单',
				type: 'en'
			},
			{
				name: '待支付',
				type: 'en'
			},
			{
				name: '待评价',
				type: 'en'
			}],
			tabsType: 'em',
		};
	},
	onShow() {
		var _this = this
		console.log(this.hasLogin,"订单的登录状态")
	},
	methods: {
		...mapMutations(['logout']),
		bindLogin() {
			if (this.hasLogin) {
				this.logout();
			} else {
				uni.navigateTo({
					url: '/pages/register/login'
				});
			}
		},
		tabSelect(e) {
			var _this = this;
			_this.tabCur = e.target.dataset.id;
			console.log(_this.tabCur,"===")
			_this.show = false;
			_this.orderstatusid = e.target.dataset.type
			_this.goods = []
			_this.mescroll.resetUpScroll()
		},
		showTab() {
			var _this = this;
			_this.show = !_this.show;
		},
		//下拉刷新的回调
		downCallback(page) {
			console.log('下拉')
			var _this = this
			_this.goods = []
			_this.mescroll.resetUpScroll()
			// _this.$http
			// 	.get('/order/getorderlist/'+this.uerInfo.userId,{
			// 		page:page.num,
			// 		size:page.size,
			// 		orderstatusid:_this.orderstatusid
			// 	})
			// 	.then(function(response) {
			// 		_this.goods = response.data.list
			// 		_this.mescroll.endByPage(response.data.list.length, response.data.pages)
					
			// 	})
			// 	.catch(function(error) {
			// 		console.log(error);
			// 		_this.mescroll.endErr();
			// 	});
		},
		//上拉加载的回调
		upCallback(page) {
			console.log('上拉')
			var _this = this
			if (!this.uerInfo.userId) {
				uni.navigateTo({
					url: '/pages/register/login'
				})
				return
			}
			_this.$http
				.get('/user/order/getorderlist',{
					page:page.num,
					size:page.size,
					statusid:_this.tabCur,
					userid:_this.uerInfo.userId
				})
				.then(function(response) {
					_this.mescroll.endBySize(response.data.list.length, response.data.total)
					//设置列表数据
					_this.goods=_this.goods.concat(response.data.list);
					_this.nolist = false
					
				})
				.catch(function(error) {
					console.log(error);
					_this.mescroll.endErr();
				});
		},
		
	}
};
</script>

<style scoped lang="scss">
/* 导航 */
.header {
	height: 95rpx;
	width: 100%;
	background: #fff;
	line-height: 95rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	font-size: 36rpx;
	text-align: center;
}
.header image {
	top: 26rpx;
	width: 38rpx;
}
.header .left {
	position: absolute;
	left: 32rpx;
}
.header .right {
	position: absolute;
	right: 32rpx;
}
/* 列表tab */
.tab {
	border-top: 1rpx solid #dfdfdf;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100;
	left: 0;
}
.tab .mask {
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
	background-color: #fff;
}
.tab .clearfix {
	height: 66rpx;
	line-height: 66rpx;
	font-size: 26rpx;
	color: #666;
	text-align: left;
	border-bottom: 1rpx solid #dfdfdf;
	background-color: #fff;
}
.tab .clearfix:last-child {
	border: 0 none;
}
.tab .clearfix .fr {
	width: 14rpx;
	margin-top: 20rpx;
}
.tab .cur {
	color: $uni-color1;
}
/* 未登录状态 */
.nologin {
	width: 100%;
}
.nologin image {
	width: 500rpx;
	display: block;
	margin: 0 auto;
	margin-top: 178rpx;
}
.nologin view {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	margin-top: 25rpx;
}
.nologin navigator {
	width: 412rpx;
	height: 90rpx;
	background-color: $uni-color1;
	line-height: 90rpx;
	color: #fff;
	font-size: 36rpx;
	text-align: center;
	border-radius: 45rpx;
	margin: 0 auto;
	margin-top: 100rpx;
}
</style>
